<template>
  <div class="packet-mount">
    <el-card>
      <tag-content-header search refresh setting @toolFun="toolFun" :settingData="columns">
        <template #title>
          <span>标签包标签列表</span>
        </template>
        <template #tools>
          <el-button type="primary" plain @click="handleAdd" class="addBtn"
            ><i class="el-icon-plus"></i>添加标签到此标签包</el-button
          >
        </template>
      </tag-content-header>
      <div class="packet-name">
        标签包名称：
        <el-select v-model="packetId" filterable>
          <el-option
            v-for="item in packetList"
            :key="item.packetId"
            :label="item.packetNm"
            :value="item.packetId"
          ></el-option>
        </el-select>
      </div>
      <tag-table
        ref="table"
        @refresh="getList"
        :data="dataList"
        :loading="loading"
        :columns="columns"
        :params="params"
        :total="totalSize"
      >
        <template #creatorNnm="{ scope }">
          {{ $name(scope.row, 'creatorNnm', 'creatorNm') }}
        </template>
        <template #hotVal="{scope}">
          <icon-svg name="iconFire" class="svg-hot" v-for="(hot, index) in scope.row.hotVal" :key="index"></icon-svg>
          <icon-svg
            name="iconFireOff"
            class="svg-hot off"
            v-for="(hot, index) in 5 - scope.row.hotVal"
            :key="10 - index"
          ></icon-svg>
        </template>
        <template #operation="{ scope }">
          <div class="operation-button-box">
            <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
              <icon-svg name="iconDelete" class="svg-delete" @click.stop.native="handleDelete(scope.row)"></icon-svg>
            </el-tooltip>
          </div>
        </template>
      </tag-table>
    </el-card>
    <packet-tag-drawer ref="packetTagDrawer" :packetId="packetId" @refresh="getList"></packet-tag-drawer>
  </div>
</template>

<script>
import packetTagDrawer from './packet-tag-drawer'
export default {
  components: {
    packetTagDrawer
  },
  data() {
    return {
      packetId: 0,
      loading: false,
      packetList: [],
      dataList: [],
      columns: [
        {
          show: true,
          label: '标签名称',
          prop: 'tagNm',
          tooltip: false,
          search: true,
          searchKey: ''
        },
        {
          show: true,
          label: '使用热度',
          prop: 'hotVal',
          align: 'center'
        },
        {
          show: true,
          label: '添加人员',
          prop: 'creatorNnm',
          align: 'center'
        },
        {
          show: true,
          label: '添加时间',
          prop: 'createTm',
          align: 'center'
        },
        {
          show: 'fixed',
          label: '操作',
          prop: 'operation',
          align: 'center',
          width: 200
        }
      ],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0
    }
  },
  watch: {
    packetId() {
      this.getList()
    }
  },
  created() {
    this.packetId = Number(this.$route.params.packetId)
    this.getPacketList()
    this.getList()
  },
  methods: {
    getPacketList() {
      this.$ajax({
        url: this.$ajax.setUrl('ast/astTagPacket/list'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.packetList = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getList() {
      this.loading = true
      this.params.queryParams.packetId = this.packetId
      this.$ajax({
        url: this.$ajax.setUrl('ast/astTagPacketDetail'),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.dataList = data.data.records
          this.totalSize = data.data.totalSize
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    toolFun(operation) {
      switch (operation) {
        case 'search':
          // 搜索动作
          this.$refs['table'].searchToggle()
          break
        case 'refresh':
          // 刷新动作
          this.getList()
          break
      }
    },
    handleAdd() {
      if (!this.packetId) {
        this.$message.info('请选择标签包')
        return
      }
      this.$refs.packetTagDrawer.showDrawer()
    },
    handleDelete(scope) {
      this.$confirm(`确定取消添加标签【${scope.tagNm}】`).then(() => {
        let messageBox = document.getElementsByClassName('el-message-box__wrapper')
        messageBox[0].focus() // 防止按空格键重复确定
        this.$ajax({
          url: this.$ajax.setUrl(`ast/astTagPacketDetail/${this.packetId}/${scope.tagId}`),
          method: 'delete',
          params: this.$ajax.setParams()
        }).then(({ data }) => {
          if (data && data.code === '0') {
            this.$message.success(data.data || data.msg)
            this.getList()
          } else {
            this.$message.error(data.data || data.msg)
          }
        })
      })
    }
  }
}
</script>

<style lang="scss">
.packet-mount {
  .tag-content-header {
    .content-tools {
      position: relative;
      bottom: -50px;
    }
  }
  .packet-name {
    margin-bottom: 10px;
    padding-left: 10px;
  }
  .addBtn {
    color: #fff;
    padding: 10px 20px;
  }
}
</style>
